<template>
  <div class="orderProcess">
    <div v-show="mainPageShow">
      <div class="step1">
        <span class="myicon">* </span>
        <span>工单处理</span>
        <span @click="showVuePopup(true)"
          >{{ selectValue }}&ensp;
          <font-awesome-icon :icon="['fa', 'chevron-right']" />
        </span>
      </div>
      <div class="line"></div>
      <div class="step2" v-if="isDisplay === true">
        <span class="myicon">* </span>
        <span>{{ selectCategory }}</span>
        <span class="step2Span" @click="showVuePopup3(true)"
          >{{ categoryValue }}&ensp;
          <font-awesome-icon :icon="['fa', 'chevron-right']" size="lg" />
        </span>
        <div class="line"></div>
      </div>
      <div class="step3" v-if="selectValue != '推迟处理'">
        <div class="step3-1">
          <span class="myicon">* </span><span>描述</span>
        </div>
        <div class="step3-2">
          <textarea
            placeholder="请输入描述"
            v-model.trim="description"
          ></textarea>
        </div>
      </div>
      <div class="contentList upload">
        <div class="contentLeft">
          <span class="contentLeftFont">附件</span>
        </div>
        <div class="contentRight cancelPos ">
          <upload :file-list="fileList" :loading="loading" :max-count="10" :max-size="10*1024*1024" @oversize="oversize" @overcount="overcount" :file-stream="true" @delete="deleteList" @afterRead="afterRead"></upload>
        </div>
      </div>

      <div v-if="selectValue == '推迟处理'">
        <div class="form-item v-flex-between">
          <div class="left">
            <span class="myicon">* </span>
            <span>是否纳入检修</span>
          </div>
          <div>
            <checker
              v-model="overhaulFlag"
              default-item-class="default-radio"
              selected-item-class="selected-radio"
            >
              <checker-item value="1"><span>是</span></checker-item>
              <checker-item value="0">否</checker-item>
            </checker>
          </div>
        </div>

        <div class="line"></div>

        <div v-if="overhaulFlag === '1'">
          <div class="form-item v-flex-between">
            <div class="left">
              <span class="myicon">* </span>
              <span>检修工期</span>
            </div>
            <div style="display:flex;justify-content: flex-end;">
              <input
                class="input"
                v-model="checkTime"
                @change="checkTimeChange"
                @input="inputing"
                type="phone"
              />
              <span style="marin-left:5px;flex:0 0 auto;">小时</span>
              <span class="placeholder" style="right:70px;" v-if="!checkTime"
                >请输入检修工期</span
              >
            </div>
          </div>
          <div class="line"></div>

          <div class="form-item v-flex-between">
            <div class="left">
              <span class="myicon">* </span>
              <span>备件准备情况</span>
            </div>
            <div>
              <checker
                v-model="isOk"
                default-item-class="default-radio"
                selected-item-class="selected-radio"
              >
                <checker-item value="1"><span>有</span></checker-item>
                <checker-item value="2">无</checker-item>
              </checker>
            </div>
          </div>
          <div class="line"></div>

          <div class="form-item v-flex-between">
            <div class="left">
              <span class="myicon">* </span>
              <span>检修负责人</span>
            </div>
            <input class="input" v-model="checkMan" type="text" />
            <span class="placeholder" v-if="!checkMan">请输入负责人</span>
          </div>
          <div class="line"></div>

          <div class="step3">
            <div class="step3-1">
              <span class="myicon">* </span><span>检修内容</span>
            </div>
            <div class="step3-2">
              <textarea
                placeholder="检修内容"
                v-model.trim="checkContent"
              ></textarea>
            </div>
          </div>
        </div>

        <div v-if="overhaulFlag === '0'">
          <div class="form-item v-flex-between">
            <div class="left">
              <span class="myicon">* </span>
              <span>延迟时间（天）</span>
            </div>
            <x-number :min="1" :max="100" v-model="overhaulDays"></x-number>
          </div>
          <div class="line"></div>
        </div>
        <div class="form-item v-flex-between">
          <div class="left" style="flex: 0 0 auto;">
            <span class="myicon">* </span>
            <span>原因</span>
          </div>
          <div
            style="display: flex;flex: 1 0 auto;"
            @click.stop="showReason = true"
          >
            <flexbox align="center" justify="flex-end"
              ><span>{{ reason }}</span
              ><x-icon
                type="ios-arrow-right"
                size="20"
                @icon-success-color="
                  '#fff';

                "
              ></x-icon>
            </flexbox>
          </div>
          <transition name="slide">
            <div class="select_wraper" v-if="showReason">
              <div class="select_box">
                <my-select
                  :options="priorityData"
                  @changeIsSelect="getSelectData"
                ></my-select>
              </div>
            </div>
          </transition>
        </div>
        <div class="other" v-if="reason == '其他'">
          <textarea
            placeholder="请输入原因"
            v-model.trim="checkOtherReason"
          ></textarea>
        </div>
        <div class="line"></div>
      </div>
      <div class="submitBtn">
        <button
          type="button"
          :class="isActive ? 'active' : ''"
          :disabled="isSubmit"
          @click="submitWorkSheet"
        >
          提交
        </button>
      </div>
    </div>
    <div class="vue-popup" v-if="type === 4 && workSheetInfo.handleType === getWorkSheetHandleTypeNum.yjj">
      <!-- <div class="mask" v-show="show2" style="cursor:pointer" @click="showVuePopup(false)"></div> -->
      <transition name="slide">
        <div class="popup-content" v-show="show2">
          <div>
            <group>
              <radio
                :options="processType1"
                @on-change="change1"
                style="background-color: #323465;color: #fff"
              ></radio>
            </group>
          </div>
          <!-- <div class="popup-bottom">
            <button
              type="button"
              @click="showVuePopup(false)"
            >保存</button>
          </div> -->
        </div>
      </transition>
    </div>
    <div class="vue-popup" v-else>
      <!-- <div class="mask" v-show="show2" style="cursor:pointer" @click="showVuePopup(false)"></div> -->
      <transition name="slide">
        <div class="popup-content" v-show="show2">
          <div>
            <group>
              <radio
                :options="processType"
                @on-change="change"
                style="background-color: #323465;color: #fff"
              ></radio>
            </group>
          </div>
          <!-- <div class="popup-bottom">
            <button
              type="button"
              @click="showVuePopup(false)"
            >保存</button>
          </div> -->
        </div>
      </transition>
    </div>

    <div class="vue-popup">
      <!-- <div class="mask" v-show="show3" style="cursor:pointer" @click="showVuePopup3(false)"></div> -->
      <transition name="slide">
        <div class="popup-content" v-show="show3">
          <div>
            <group style="margin-top: 0">
              <radio
                :options="personlist"
                v-model="categoryValue"
                style="background-color: #323465;color: #fff;height: 200px;overflow: scroll;"
              ></radio>
            </group>
          </div>
          <div class="popup-bottom">
            <button type="button" @click="showVuePopup3(false)">保存</button>
          </div>
        </div>
      </transition>
    </div>
    <div>
      <choose-checker
        :options="checkersOptions"
        v-show="chooseCheckerShow"
        @getCharger="chooseCharger"
      ></choose-checker>
    </div>
    <!-- <shortcut-menu></shortcut-menu> -->
  </div>
</template>

<script>

import {
  XHeader,
  Radio,
  Group,
  Flexbox,
  FlexboxItem,
  PopupRadio,
  Checker,
  CheckerItem,
  Popup,
  XNumber
} from "vux";
import ShortcutMenu from "../../components/common/shortcut_menu.vue";
import ChooseChecker from "../pages/chooseChecker.vue";
import WorkSheetDao from "@/daos/work_sheet_dao";
import { mapGetters } from "vuex";
import mySelect from "@/components/common/select/index";
import upload from "@/components/common/upload/upload";
import FileUpload from "@/daos/file_upload";

export default {
  components: {
    Radio,
    Group,
    Flexbox,
    FlexboxItem,
    Checker,
    CheckerItem,
    "shortcut-menu": ShortcutMenu,
    PopupRadio,
    ChooseChecker,
    mySelect,
    upload,
    XNumber
  },
  data() {
    return {
      showReason: false,
      isDisplay: false,
      show2: false,
      show3: false,
      show4: false,
      selectValue: "解决",
      selectCategory: "",
      categoryValue: "",
      personlist: [],
      processType: ["解决", "上报", "驳回", "转办", "推迟处理"],
      processType1: [
        { key: 11, value: "验收通过" },
        { key: 4, value: "驳回" }
      ],
      fileList: [],
      auditor: [],
      transferer: [],
      workSheetInfo: {},
      type: 0,
      departmentId: "",
      reporterList: {},
      transferList: [],
      handleType: 11,
      selectPerson: "",
      description: "",
      userInfo: {},
      checkersOptions: {},
      chooseCheckerShow: false,
      mainPageShow: true,
      leader: "",
      isSubmit: false,
      isActive: false,
      isOk: "1",
      reasonList: ["待停产", "无配件", "其他"],
      priorityData: [
        {
          name: "待停产",
          value: 1,
          selected: false
        },
        {
          name: "无配件",
          value: 2,
          selected: false
        },
        {
          name: "其他",
          value: 3,
          selected: true
        }
      ],
      show: false,
      loading: false,
      reason: "其他",
      checkTime: "",
      checkMan: "",
      checkContent: "",
      checkOtherReason: "",
      overhaulFlag: "0",
      overhaulDays: 1
    };
  },
  created: function() {
    this.type = +this.$route.query.type || 0;
    this.workSheetInfo = this.$store.state.workSheetInfo;
    if (
      this.type === 4 &&
      this.workSheetInfo.handleType === this.getWorkSheetHandleTypeNum.yjj
    ) {
      this.selectValue = "验收通过";
      this.handleType = this.getWorkSheetHandleTypeNum.ygb;
    } else {
      this.handleType = this.getWorkSheetHandleTypeNum.yjj;
    }
    this.getWorkSheet();
    // this.loadReporters();
    this.getUser();
  },
  computed: {
    ...mapGetters(["getWorkSheetSatatusNum", "getWorkSheetHandleTypeNum"])
  },
  methods: {
    getSelectData(d) {
      this.priorityData.map(item => {
        item.selected = false;
      });
      this.showReason = false;
      this.reason = this.priorityData[d].name;
      this.priorityData[d].selected = true;
      console.log(this.priorityData[parseInt(d)].name, "da");
    },
    inputing() {
      let len1 = this.checkTime.substr(0, 1);
      let len2 = this.checkTime.substr(1, 1);
      if (len2 == ".") {
        this.checkTime = this.checkTime.substr(0, 3);
        return;
      } else {
        this.checkTime = this.checkTime.substr(0, 2);
        return;
      }
    },
    //工时改变
    checkTimeChange(e) {
      if (/^([1-9]\d{1,9}|\d)(.\d{1,2})?$/.test(this.checkTime)) {
        this.checkTime = Number(this.checkTime).toFixed(1);
      } else {
        this.$commom.alert("请输入正确检修工期，只能输入数字。");
      }
    },
    getUser: function() {
      this.$http(this.$API.getUserInfo, {}, true).then(user => {
        this.userInfo = user;
      });
    },
    showVuePopup(flag) {
      this.show2 = flag;
    },
    showVuePopup3(flag) {
      // this.show3 = flag;
      // if (this.selectValue === "上报") {
      //   this.personlist = this.auditor;
      // } else if (this.selectValue === "转办") {
      //   this.personlist = this.transferer;
      // }
      this.chooseCheckerShow = true;
      this.mainPageShow = false;
      this.checkersOptions = {
        checkers: this.checkers
      };
    },
    showVuePopup4(flag) {
      this.show4 = flag;
    },
    change1(value, label) {
      this.selectValue = label;
      this.handleType = value;
      this.showVuePopup(false);
    },
    change(value, label) {
      // debugger
      this.selectValue = value;
      if (value === "上报") {
        this.handleType = this.getWorkSheetHandleTypeNum.sb;
        this.selectCategory = "选择审核人";
        // this.categoryValue = '请选择';
        this.getCharge();
        this.loadTransfer();
        this.isDisplay = true;
      } else if (value === "转办") {
        this.handleType = this.getWorkSheetHandleTypeNum.zb;
        this.selectCategory = "选择转办人";
        // this.categoryValue = '请选择';
        this.getCharge();
        this.loadTransfer();
        this.isDisplay = true;
      } else if (value === "解决") {
        this.isDisplay = false;
        // this.handleType = this.workSheetInfo.handleType === 4 ? 10 : 15;
        this.handleType = this.getWorkSheetHandleTypeNum.yjj;
      } else if (value == "驳回") {
        this.isDisplay = false;
        this.handleType = this.getWorkSheetHandleTypeNum.bh;
      } else if (value == "推迟处理") {
        this.isDisplay = false;
        this.handleType = this.getWorkSheetHandleTypeNum.tccl;
      }
      this.showVuePopup(false);
    },

    getWorkSheet: function() {
      // this.workSheetInfo = this.$route.query.workSheet;
      // this.workSheetInfo = this.$route.query.workSheet;
      this.departmentId = this.$route.query.departmentId;
      this.loadTransfer();
    },

    // 获取上报人
    loadReporters: function() {
      this.$http(this.$API.getLeader, {}, true).then(data => {
        if (data) {
          this.reporterList = data;
          // for (var report of data) {
          this.auditor.push(data.name);
          // }
          this.selectPerson = this.auditor[0];
        } else {
          this.auditor = [];
        }
      });
    },
    //g获取负责人
    getCharge() {
      this.$http(this.$API.getUserInfo, true).then(res => {
        if (res) {
          
          this.operator = res.name;
          // this.$http(
          //   this.$API.getLoadLeader,
          //   { departmentId: res.department },
          //   true
          // ).then(res => {
          WorkSheetDao.getLoadLeader(res.department.id, ress => {

            if (ress.id) {
              this.leader = ress.id;
            }
            if (ress.name) {
              this.categoryValue = ress.name;
            }
          });
        }
      });
    },
    // 获取转办人
    loadTransfer: function() {
      console.log(`departmentId: ${this.departmentId}`);
      this.$http(
        this.$API.loadTransferees,
        /* { departmentId: this.departmentId }, */
        true
      ).then(data => {
        if (data) {
          this.transferList = data;
          for (var item of data) {
            this.transferer.push(item.name);
          }
          this.selectPerson = this.transferer[0];
        } else {
          this.transferer = [];
        }
      });
    },

    submitWorkSheet: function() {
      this.isActive = true;
      setTimeout(() => {
        this.isActive = false;
      }, 200);
      this.selectPerson = this.categoryValue;

      if (
        this.handleType != this.getWorkSheetHandleTypeNum.tccl &&
        !!!this.description
      ) {
        this.$commom.alert("请填写描述");
        return;
      }
      var operator = "";
      if (this.handleType == this.getWorkSheetHandleTypeNum.sb) {
        if (!this.selectPerson || this.selectPerson == "请选择") {
          this.$commom.alert("请选择上报人");
          return;
        }
        operator = this.leader;
        if (this.leader == this.userInfo.id) {
          this.$commom.alert("工单负责人不能选择自己，请选择其他负责人！");
          return false;
        }
      } else if (this.handleType == this.getWorkSheetHandleTypeNum.zb) {
        if (!this.selectPerson || this.selectPerson == "请选择") {
          this.$commom.alert("请选择转办人");
          return;
        }
        operator = this.leader;
        if (this.leader == this.userInfo.id) {
          this.$commom.alert("工单负责人不能选择自己，请选择其他负责人！");
          return false;
        }
      } else if (this.handleType == this.getWorkSheetHandleTypeNum.tccl) {
        operator = this.userInfo.id;
        if (this.overhaulFlag === "1") {
          if (!this.checkTime) {
            this.$commom.alert("填写检修工期");
            return;
          }
          if (!this.checkMan) {
            this.$commom.alert("请填写检测负责人");
            return;
          }
          if (!this.checkContent) {
            this.$commom.alert("请填写检测内容");
            return;
          }
        }

        if (!this.reason) {
          this.$commom.alert("请选择原因");
          return;
        }
        if (this.reason == "其他" && !this.checkOtherReason) {
          this.$commom.alert("请填写其他原因");
          return;
        }
      } else {
        operator = this.userInfo.id;
      }
      var params = {
        workSheetId: this.$route.query.workSheetId,
        handleType: this.handleType,
        leader: operator,
        description: this.description,
        sparePartsPrepare: this.isOk == "1" ? true : false, //备件准备情况：true-是；false-否
        overhaulDuration: Number(this.checkTime), //检修工期
        overhaulMan: this.checkMan, //检测负责人
        overhaulContent: this.checkContent, //检测内容
        delayReasonType: this.reasonList.indexOf(this.reason) + 1, //推迟处理原因类型：1-停产；2-无配件；3-其他
        delayReasonDescription: this.checkOtherReason, //推迟处理原因描述
        overhaulFlag: this.overhaulFlag,
        overhaulDays: this.overhaulDays,
        files: this.fileList,
      };
      console.log(params);
      if (
        this.handleType !== this.getWorkSheetHandleTypeNum.tccl &&
        this.overhaulFlag !== "0"
      ) {
        params.overhaulFlag = "";
        params.overhaulDays = "";
      }
      this.isSubmit = true; //disabled button
      // debugger

      WorkSheetDao.postWorkSheetSaveWorkSheetHandle(params, res => {
        this.$commom.alert("添加成功");
        let workSheetList = localStorage.getItem("workSheetList"); //取回students变量
        workSheetList = JSON.parse(workSheetList);
        let toDealWorkSheetList = localStorage.getItem("toDealWorkSheetList"); //取回students变量
        toDealWorkSheetList = JSON.parse(toDealWorkSheetList);
        console.log(workSheetList);
        console.log(toDealWorkSheetList);
        this.$router.push({
          path: "/workSheetHomePage"
        });
      });
    },

    chooseCharger: function(chargeId, checkerName) {
      this.leader = chargeId;
      this.categoryValue = checkerName;
      this.mainPageShow = true;
      this.chooseCheckerShow = false;
    },
    
    oversize(){
      this.$vux.toast.text('文件大小请不要超过5MB。')
    },
    overcount(){
      this.$vux.toast.text('文件个数请小于10个。')
    },
    deleteList(index){
      this.fileList.splice(index,1)
    },
    afterRead(files){
      // console.log(files);
      let formData = new FormData();
      formData.append('file', files);
      this.loading = true
      FileUpload.upload(formData,res=>{
        // console.log(res);
        this.loading = false
        this.fileList.push(res)
      }, err=>{
        this.loading = false
        this.$vux.toast.text(err)
      })
    }
  }
};
</script>

<style lang="less" scoped>
.select_wraper {
  position: absolute;
  width: 100%;
  height: 139px;
  left: 0;
  bottom: -123px;
  // padding: 16px;
  z-index: 9999;
  /deep/.dep_name {
    color: #515a6e !important;
  }
}
.select_box {
  background: rgba(232, 233, 237, 0.9);
  border-radius: 4px;
  line-height: initial;
}
.main_wrapper {
  color: #fff;
  width: 100%;
  z-index: 999;
  font-size: 16px;
}
.vux-popup-dialog {
  height: 100vh !important;
  top: 60%;
  bottom: unset !important;
  background: #22233f !important;
  font-size: 14px;
  padding: 0 11px 0 13px;
  box-sizing: border-box;
  background-color: #ffffff !important;
}
/********************列表的样式********************/
#demo {
  padding: 0 15px;
  box-sizing: border-box;
  .userList {
    padding: 10px 0 !important;
    color: #000000 !important;
    line-height: initial;
    span {
      font-weight: unset;
    }
    .userListContent {
      display: inline-block;
      width: 100%;
      text-align: left;
    }
  }
}
* {
  touch-action: none;
}
.orderProcess {
  background: #22233f;
  min-height: 100%;
  width: 100%;
  padding-bottom: 30px;
}
.vux-tap-active:active {
  background-color: unset !important;
}
.step1,
.step2,
.step3-1 {
  height: 60px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 60px;
  padding: 0 4%;
}
.step1 span:last-child,
.step2Span {
  float: right;
  color: #ddd;
}
.line {
  width: 92%;
  margin: 0 4%;
  border-bottom: 1px solid #737373;
}
.in-line {
  width: 100%;
  margin: 0;
}
.myicon {
  color: #c11920;
}
.step3-2 {
  text-align: center;
}
.step3-2 textarea {
  height: 120px;
  width: 90%;
  border-radius: 8px;
  border: 1px solid #737373;
  background: #22233f;
  text-align: left;
  color: #fff;
  padding: 8px;
  font-size: 16px;
  &::placeholder{
    color: gray !important;
  }
}
.contentList {
  
  font-size: 18px;
  font-weight: 600;
  padding: 12px 4%;
  overflow: hidden;
  border-bottom: 1px solid #464656;

  .contentLeft,
  .contentRight {
    font-size: 17px;
  }
  .contentLeft {
    float: left;
    color: #ffffff;
  }
  .contentRight {
    position: relative;
    float: right;
    color: #8c8c96;
    box-sizing: border-box;
    margin-top: 3px;
  }
  .upload{
    position: relative;
  }
}
.upload{
  display: flex;
  flex-direction: column;
  // align-items: center;
  // justify-content: space-between;

  .contentRight {

  }
}
.submitBtn {
  text-align: center;
  margin-top: 50px;
}
.submitBtn button {
  height: 43px;
  width: 90%;
  border-radius: 50px;
  background: transparent;
  font-size: 18px;
  border: 1px solid #456de6;
  color: #456de6;
  &.active {
    background: #456de6;
    color: #fff;
  }
}

.vue-popup {
  .popup-content {
    position: absolute;
    height: 200px;
    //bottom: 0;
    left: 0;
    top: 80px;
    width: 100%;
    background-color: #323465;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    z-index: 888;
    .popup-bottom {
      text-align: center;
      height: 60px;
      line-height: 50px;
      font-size: 18px;
      color: #fff;
      /*border-top: 1px solid #737373;*/
      position: absolute;
      width: 100%;
      bottom: 0;
      button {
        height: 40px;
        width: 70%;
        border-radius: 20px;
        background-color: #456de6;
        color: #fff;
        border: none;
      }
    }
  }
}
.popup-content > div > div.weui-cells,
.popup-content > div > div.vux-no-group-title {
  margin-top: 0 !important;
}
.weui-cells.vux-no-group-title::after {
  border: none !important;
}
.mask {
  position: fixed;
  width: 70%;
  left: 56px;
  bottom: 15px;
  border-radius: 20px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0);
  transition: all 0.2s ease-in;
  z-index: 999;
  margin-bottom: 0;
}

.slide-enter-active {
  animation-name: slideInUp;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}
.slide-leave-active {
  animation-name: slideOutDown;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}
@keyframes slideInUp {
  0% {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translateZ(0);
  }
}
@keyframes slideOutDown {
  0% {
    transform: translateZ(0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}
.delay-leave-active {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.bottomBtn {
  width: fit-content;
  border: 1px solid #ddd;
  padding: 6px 15px;
  position: fixed;
  bottom: 10px;
  left: 10px;
  border-radius: 15px;
  background: #22233f;
}
.bottomBtn button {
  border: none;
  background: #22233f;
  color: #fff;
}
.bottomBtn span {
  color: #fff;
  margin: 0 8px;
}

.flex-demo {
  text-align: center;
  color: #fff;
  background-color: #323465;
  border-radius: 4px;
  background-clip: padding-box;
  height: 125px;
  /*line-height: 125px;*/
  img {
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
  }
  .lineImg1 {
    margin-top: 35px;
  }
  .lineImg2 {
    margin-top: 20px;
  }
}

.vue-popup4 {
  .popup-content {
    position: absolute;
    height: 350px;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #323465;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    z-index: 888;
    .popup-title {
      text-align: center;
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      color: #fff;
      border-bottom: 1px solid #737373;
    }
    .popup-body {
      height: 250px;
    }
    .popup-bottom {
      text-align: center;
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      color: #fff;
      border-top: 1px solid #737373;
      position: absolute;
      width: 100%;
      bottom: 0;
    }
  }
}
.mask2 {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 50px;
  /*top: 0;*/
  /*height: 100%;*/
  background-color: rgba(0, 0, 0, 0);
  transition: all 0.2s ease-in;
  z-index: 999;
}
.form-item {
  position: relative;
  height: 60px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 60px;
  padding: 0 4%;
  display: flex;
  .left {
    display: flex;
    span:last-child {
      margin-left: 4px;
    }
  }
}
.other {
  // width: 100%;
  // padding: 0 4%;
  // z-index: 0;
  text-align: center;
  textarea {
    height: 120px;
    width: 90%;
    border-radius: 8px;
    border: 1px solid #737373;
    background: #22233f;
    text-align: left;
    color: #fff;
    padding: 8px;
    &::placeholder{
      color: gray !important;
    }
  }
}
.v-flex-between {
  justify-content: space-between;
  .input {
    font-size: 16px;
    flex: 0 1 auto;
    text-align: right;
    color: #fff;
  }
}
.radios {
  /deep/.weui-cells {
    display: flex;
    color: #8c8c96;
    &::before {
      border: none;
    }
    &::after {
      border: none;
    }
  }
  /deep/.weui-cell:before {
    border: none;
  }
}
.default-radio {
  position: relative;
  margin-left: 30px;
  color: #8c8c96;
  display: inline-flex;
  align-items: center;
  &::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 100%;
    border: 1px solid #8c8c96;
    background-color: #fff;
  }
}
.selected-radio {
  &::before {
    border: 1px solid #409eff;
  }
  &::after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 100%;
    background-color: #409eff;
    left: 3px;
    top: 25px;
  }
}
.vux-x-icon {
  fill: #fff;
}
/deep/.ios-arrow-right {
  color: #fff !important;
}
.v-popup-content {
  position: absolute;
  top: 60px;
  left: 0;
  // height: 350px;
  width: 100%;
  background-color: #323465;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  z-index: 888;
}
input::-webkit-input-placeholder,
textarea ::-webkit-input-placeholder {
  color: #8c8c96;
}
input::-moz-input-placeholder,
textarea::-moz-input-placeholder {
  color: #8c8c96;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: #8c8c96;
}
.placeholder {
  position: absolute;
  top: 0px;
  right: 16px;
  font-size: 16px;
  color: #8c8c96;
  pointer-events: none;
}
/deep/.weui-cell {
  padding-right: 0;
  .vux-number-selector-sub {
    padding: 0 10px;
    &:first-child {
      padding-top: 6px;
    }
  }
  .vux-number-selector {
    height: 30px;
    svg {
      fill: #456de6;
    }
  }
  .vux-number-input {
    height: 30px;
  }
}
</style>
